<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 引入header -->
<head th:include="admin/common/adminHeader::html(title='用户')">
</head>
<body>
<!--引入公共头部-->
<div th:replace="~{admin/common/common :: #top_}"></div>
<div id="vue" class="container-fluid">
	<div class="row">
		<!--引入公共左边树-->
		<div th:replace="~{admin/common/common :: menu_(actUri='users')}"></div>
		<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
			<h2>
				<a class="btn btn-sm btn-success" href="users/add">新增</a>
				<a class="btn btn-sm btn-success" href="#" @click="jumpEcommerce()">跳转到新电商项目</a>
			</h2>
			<div class="table-responsive">
				<table class="table table-striped table-sm">
					<thead>
					<tr>
						<th>#</th>
						<th>昵称</th>
						<th>用户名</th>
						<th>密码</th>
						<th>创建日期</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody>
					<tr v-for="bean in beans">
						<td>{{bean.id}}</td>
						<td>{{bean.nickname}}</td>
						<td>{{bean.username}}</td>
						<td>{{bean.password}}</td>
						<td>{{bean.gmt_create | time}}</td>
						<th>
							<a class="btn btn-sm btn-primary" :href="'users/edit/' + bean.id">编辑</a>
							<button class="btn btn-sm btn-danger deleteBtn" @click="deleteBean(bean.id)">删除</button>
						</th>
					</tr>
					</tbody>
				</table>
                <div th:replace="~{admin/common/adminPage::adminPage}"></div>
			</div>
		</main>
	</div>
</div>
</body>
<div th:include="admin/common/adminFooter::html"></div>

<script>


	$(function () {
        var data4Vue = {
            uri:'../users/',
            beans: [],
            pageInfo:{}
        };
        Vue.filter('time', function (time) {
            var date = new Date(time);
            return Str=date.getFullYear() + '-' +
                (date.getMonth() + 1) + '-' +
                date.getDate() + ' ' +
                date.getHours() + ':' +
                date.getMinutes() + ':' +
                date.getSeconds();
        });
        var vue = new Vue({
            el: "#vue",
			data: data4Vue,
            mounted: function () {
				this.list(1);
            },
			methods:{
                list:function (start) {
					var url = this.uri + start + "/5";
                    axios.get(url).then(function(response) {
						vue.beans = response.data.list;
						vue.pageInfo =response.data;
                    });
                },
                jump: function(page){
                    jump(page,vue); //定义在adminHeader.html 中
                },
                jumpByNumber: function(start){
                    jumpByNumber(start,vue);
                },
                deleteBean: function (id) {
                    if(!checkDeleteLink())
                        return;
                    var url = this.uri+id;
                    axios.delete(url).then(function(response){
                        if(0!=response.data.length){
                            alert(response.data);
                        }
                        else{
                            vue.list(vue.pageInfo.pageNum);
                        }
                    });
                },
				jumpEcommerce:function () {
					console.log("Jump Ecommerce");
					axios.get("http://localhost:8080/ecommerce/getOnlineCount").then(function(response) {
						vue.beans = response.data.list;
						vue.pageInfo =response.data;
					})
				}
			}
        });
    })
</script>
</html>